import React, { useState, useEffect } from "react";
import "./center.less";
import { Descriptions } from "antd";
import Title from "../../components/Title/Title";
import { getAccountinfo, editavater } from "../../api/account";
// import { PlusOutlined } from "@ant-design/icons";
import { Image, Upload } from "antd";
import UpAvatar from "../../components/UpAvater/UpAvater";
import { useSelector } from "react-redux";

const getBase64 = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
export default function UserCenter() {
  const { userImg } = useSelector((storage) => storage.userSlice);

  const [userInfo, setUserInfo] = useState(null);
  const [imgUrl, setImgUrl] = useState("");
  const [imgItem, setImgItem] = useState("");
  const normFile = (e) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };

  useEffect(() => {
    let storedUser = JSON.parse(localStorage.getItem("user"));
    if (storedUser) {
      let { id, account, userGroup, ctime, imgUrl } = storedUser;
      getAccountinfo({ id, account, userGroup, ctime, imgUrl }).then((res) => {
        setUserInfo(res.data);
        console.log(res.data);
      });
    }
  }, []);



  

  const handleChange = async ({ file }) => {
    const formData = new FormData();
    formData.append("file", file);
    const res = await editavater(formData);
    console.log(res.data.imgUrl);
    if (res.data.code == 0) {
      setImgUrl(`http://8.137.157.16:9002${res.data.imgUrl}`);
      let index = res.data.imgUrl.lastIndexOf("/");
      setImgItem(res.data.imgUrl.substring(index + 1));
    }
  };

  const items = userInfo
    ? [
        {
          key: "1",
          label: "管理员ID",
          children: userInfo.accountInfo.id,
          labelStyle: { color: "black", fontSize: "18px" },
          contentStyle: { fontSize: "18px" },
        },
        {
          key: "2",
          label: "账号",
          children: userInfo.accountInfo.account,
          labelStyle: { color: "black", fontSize: "18px" },
          contentStyle: { fontSize: "18px" },
        },
        {
          key: "3",
          label: "用户组",
          children: userInfo.accountInfo.userGroup,
          labelStyle: { color: "black", fontSize: "18px" },
          contentStyle: { fontSize: "18px" },
        },
        {
          key: "4",
          label: "创建时间",
          children: userInfo.accountInfo.ctime,
          labelStyle: { color: "black", fontSize: "18px" },
          contentStyle: { fontSize: "18px" },
        },
        {
          key: "5",
          label: "管理员头像",
          children: (
            <>
              <div className="colabration">
                <div className="one">
                  <UpAvatar></UpAvatar>
                </div>
                <div className="two">
                <img className="Img" src={userImg?userImg:"http://8.137.157.16:9002" + userInfo.accountInfo.imgUrl} alt="" />
                </div>
              </div>
            </>
          ),

          labelStyle: { color: "black", fontSize: "18px" },
          contentStyle: { fontSize: "18px" },
        },
      ]
    : [];
  return (
    <div className="center">
      <div className="add">
        <Title title="用户中心"></Title>
      </div>
      {/* <TimePicker onChange={onChange} defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')} /> */}
      <Descriptions items={items} column={1} />
    </div>
  );
}
